<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>wwxssz</title>   <!--网页顶部标题名-->
    <link rel="stylesheet" href="../css/flex.css"/>   <!--添加的属性要在自己建的属性上面-->
    <link rel="stylesheet" href="../css/11.css"/>      <!-- 向上一级：../   下一级 ：/   -->
</head>
<body>

<!--  flex布局  -->

<!--
第一步:引入flex.css

第二部：在需要添加对其的“父元素”上加flex属性

    main：  left ：左（默认） center ：中  right： 右
            justify:  俩端对齐/分段对齐   ps：多个东西时横向平方


     cross：   top：上（默认）  center ：中  bottom：下

     
     dir ： top (垂直布局，横轴变成cross，纵轴变成main)
-->


<div class="wlx">
    <div class="ny"></div>
</div>
<div class="wlx" flex="main:center">
    <div class="ny"></div>
</div>
<div class="wlx" flex="main:right">
    <div class="ny"></div>
</div>
<div class="wlx" flex="cross:center">
    <div class="ny"></div>
</div>
<div class="wlx" flex="main:center cross:center">
    <div class="ny"></div>
</div>
<div class="wlx" flex="cross:center main:right">
    <div class="ny"></div>
</div>
<div class="wlx" flex="cross:bottom ">
    <div class="ny"></div>
</div>
<div class="wlx" flex="cross:bottom main:center ">
    <div class="ny"></div>
</div>
<div class="wlx" flex="cross:bottom main:right ">
    <div class="ny"></div>
</div>

<!--二-->
<div class="wlx" flex="main:justify dir:top ">

    <div class="a">
        <div class="ny"></div>
    </div>
    <div class="b" flex="main:right">
        <div class="ny"></div>
    </div>
</div>

<!--三-->
<div class="wlx" flex="dir:top main:justify">
    <div class="a">
        <div class="ny"></div>
    </div>
    <div class="b" flex="main:center">
        <div class="ny"></div>
    </div>
    <div class="c" flex="main:right">
        <div class="ny"></div>
    </div>
</div>

<!--四-->
<div class="wlx" flex="main:justify dir:top">
    <div class="a" flex="main:justify">
        <div class="ny"></div>
        <div class="ny"></div>
    </div>
    <div class="b" flex="main:justify">
        <div class="ny"></div>
        <div class="ny"></div>
    </div>
</div>

<!--五-->
<div class="wlx" flex="dir:top main:justify">
    <div class="a" flex="main:justify">
        <div class="ny"></div>
        <div class="ny"></div>
    </div>
    <div class="b" flex="main:center">
        <div class="ny"></div>
    </div>
    <div class="c" flex="main:justify">
        <div class="ny"></div>
        <div class="ny"></div>
    </div>
</div>

<!--六-->
<div class="wlx" flex="dir:top main:justify">
    <div class="a" flex="main:justify">
        <div class="ny"></div>
        <div class="ny"></div>
    </div>
    <div class="b" flex="main:justify">
        <div class="ny"></div>
        <div class="ny"></div>
    </div>
    <div class="c" flex="main:justify">
        <div class="ny"></div>
        <div class="ny"></div>
    </div>
</div>

</body>
</html>




